<template>
  <div class="about">
    <button class="button" @click="dialogVisible = true">点击显示</button>
    <MyDialog width="30%" :visiable="dialogVisible" @closeDialog="handleClose" @closeMask="dialogVisible = false" >
      <!--  直接删除-->
      <template v-slot:header>标题</template>
      <template v-slot:body>中间的内容！！！</template>
      <template v-slot:footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from "@/components/Dialog/Dialog.vue";
import { reactive, toRefs, ref, onMounted, computed } from "vue";
import { ElMessageBox } from "element-plus";
export default {
  name: "Test",
  components: { MyDialog },
  setup() {
    const state = reactive({
      dialogVisible: false,
    });
    let handleClose = (done) => {
      // state.dialogVisible = false;
      ElMessageBox.confirm("确认关闭？")
        .then((_) => {
          console.log("回调执行", done);
          state.dialogVisible = done;
        })
        .catch((_) => {});
    };

    return {
      ...toRefs(state),
      handleClose,
    };
  },
};
</script>

<style  scoped>
.button {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>